<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凯骏机电有限公司</title>
    <style>
        body {
            background-color: #00008B; /* 深蓝色 */
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        fieldset{
            margin: 20px;
        }
       .container {        
            display: grid;
            grid:
            'head head head head head head'
            'menu content content content content content' 
            'tail tail tail tail tail tail'; 
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            margin: 20px;           
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(112, 191, 240, 0.774);
        }
        .head{
            grid-area: head;            
            background-image:url("./true.png"),linear-gradient(rgba(214, 233, 245, 0.774),rgba(22, 146, 240, 0.774),dodgerblue);
            background-repeat: no-repeat;
            background-position: 0;
            
        }
        .head h1{
            text-align: center;
            height: 90px;            
        }
        .main_menu {
            grid-area: menu;
            background-color: dodgerblue;
            text-align:center;            
        }
        .content {
            grid-area: content;
            background-image: linear-gradient(rgba(214, 233, 245, 0.774),rgba(110, 184, 240, 0.774),rgb(110, 169, 229)), url("./she.png");
            background-repeat: no-repeat;
            background-size: cover;
            border: solid 3px;            
            border-color: azure;

        }
        .tail {
            grid-area: tail;
        }
        ul.pagination {
            display: block;
            padding: 10px;
            margin: 0;
        }
        ul.pagination li {
            display: block;
            color: black;
            text-decoration: none;
            padding: 1em 1em;                    
            margin-top: 2em;
            margin-bottom: 2em;
            list-style-type: none;
        }
        ul.pagination li.active {
            background-color: teal;
            color: white;
        }
        ul.pagination li:hover:not(.active){
            background-color: antiquewhite;
        }
        .energy_storage_cabinet{display: none;}
        canvas{
            border: 1mm ridge rgba(58, 82, 244, 0.774);
            
        }
        .bill_for_electricity{display: none;}
        .history_data{display: none;}
        .item{
            display: inline-block;
            border: solid 2px;
            border-radius: 5px;
            padding: 1em 0.6em 1em 0.6em;
            margin: 10px 10px 0px 10px;            
            background-image: url("./titles.png");
            background-color: rgb(240, 240, 254);
            background-size: 100% 30%;
            background-repeat: no-repeat;
            color: #000;
        }
        .item2{
            display: inline-block;
            border: solid 1px;
            border-radius: 3px;
            padding: 0.7em 0.4em 0.7em 0.4em;
            margin: 0px 10px 10px 10px;            
            background-image: linear-gradient(rgb(240, 240, 254),rgb(89, 236, 233));
            color: #000;
        }
        .item span{padding: 0.2em;}
        .item2 span{padding: 0.2em;}
        p{
            padding: 0.2em;
        }
        
        .cabinet_electricity_history{
            display: grid; 
             grid:
            'main_chart sub_chart1'
            'main_chart sub_chart2' 
            'main_chart sub_chart3' 
            'main_chart sub_chart4'; 
            grid-template-columns: 2fr 1fr;
            margin: 20px 0px 20px 0px;

        }
        .main_chart{
            grid-area: main_chart; 
        }
        .sub_chart1{grid-area: sub_chart1;}
        .sub_chart2{grid-area: sub_chart2;}
        .sub_chart3{grid-area: sub_chart3;}
        .sub_chart4{grid-area: sub_chart4;}

    </style>
</head>
<body>
<div class="container">
    <div class="head">
    <h1>凯骏机电用电数据</h1>
    <hr>
    </div>
    
    <div class="main_menu">
            <ul class="pagination"> 
                <li id="1" onclick="choose(1)">电网输入</li>           
                <li id="2" onclick="choose(2)">储能柜</li>
                <li id="3" onclick="choose(3)">电费展示</li>
                <li id="4" onclick="choose(4)">历史数据</li>
                
            </ul>
            <script>            
                var li_1 = document.getElementById('1');
                var li_2 = document.getElementById('2');
                var li_3 = document.getElementById('3');
                var li_4 = document.getElementById('4');
                li_1.classList.add('active');
                function clear(){
                    var choosed = document.getElementsByClassName('electricity_grid');
                    choosed[0].style.display = 'none';
                    li_1.classList.remove('active');
                    choosed = document.getElementsByClassName('energy_storage_cabinet');
                    choosed[0].style.display = 'none';
                    li_2.classList.remove('active');
                    choosed = document.getElementsByClassName('bill_for_electricity');
                    choosed[0].style.display = 'none';
                    li_3.classList.remove('active');
                    choosed = document.getElementsByClassName('history_data');
                    choosed[0].style.display = 'none';
                    li_4.classList.remove('active');
                }
                
                function choose(n){
                    clear();                    
                    switch(n) {
                        case 1:
                            choosed = document.getElementsByClassName('electricity_grid');
                            choosed[0].style.display = 'block';
                            li_1.classList.add('active');  
                            break;
                        case 2:
                            choosed = document.getElementsByClassName('energy_storage_cabinet');
                            choosed[0].style.display = 'block';  
                            li_2.classList.add('active');                      
                            break;
                        case 3:
                            choosed = document.getElementsByClassName('bill_for_electricity');
                            choosed[0].style.display = 'block';
                            li_3.classList.add('active');                                                       
                            break;
                        case 4:
                            choosed = document.getElementsByClassName('history_data');
                            choosed[0].style.display = 'block'; 
                            li_4.classList.add('active');
                            break;
                    }                                        
                }
            </script>
    </div>
    <div class="content">
        <div class="electricity_grid">
                        
            <form action="" id="electricity_grid">
            
                <p><span class="item">有功功率 <span id="active_power">00000</span>KW</span>
                    <span class="item">无功功率 <span id="reactive_power">00000</span>KVA</span>                    
                    <span class="item">A相电流 <span id="current_of_phase_A">00000</span>A</span>
                    <span class="item">B相电流 <span id="current_of_phase_B">00000</span>A</span>
                    <span class="item">C相电流 <span id="current_of_phase_C">00000</span>A</span>
                </p>
                <fieldset class="active_power_chart"><legend>有功功率曲线</legend><canvas id="active_power_chart" width="600px" height="400px"></canvas>
                </fieldset>
                <script>
                    active_power_chart=document.getElementById("active_power_chart");  
                    var active_power_ctx = active_power_chart.getContext("2d");               
                    // 假设你有一些数据
                    var randomArray = [];
                    randomArray[0] = 0;
                    for (var i = 1; i < 400; i++) {
                        randomArray.push(Math.random() * 1.2 + randomArray[i-1]);
                    }
                    function active_power_paint(){
                        active_power_ctx.beginPath();
                        active_power_ctx.moveTo(50, 350); // 从左下角开始
                        active_power_ctx.lineTo(550, 350); // 绘制x轴
                        active_power_ctx.moveTo(50, 350); // 回到原点
                        active_power_ctx.lineTo(50, 50); // 绘制y轴 
                        active_power_ctx.strokeStyle = "black";                       
                        active_power_ctx.stroke();
                        active_power_ctx.textAlign = "left";
                        active_power_ctx.font = "16px Arial";
                        active_power_ctx.fillText('时间(h)',545,370);
                        active_power_ctx.fillText('功率(kw)',10,40);
                        
                        // 绘制x轴刻度
                        active_power_ctx.font = "12px Arial";
                        for (var i = 0; i <= 24; i++) {
                            active_power_ctx.moveTo(50 + i * 20, 350);
                            active_power_ctx.lineTo(50 + i * 20, 345);
                            active_power_ctx.stroke();                            
                            active_power_ctx.fillText(i, 50 + i * 20 - 5, 370);
                        }
                        
                        // 绘制y轴刻度
                        active_power_ctx.textAlign = "right";                        
                        for (var i = 0; i <= 14; i++) {
                            active_power_ctx.moveTo(50, 350 - i * 20);
                            active_power_ctx.lineTo(55, 350 - i * 20);
                            active_power_ctx.stroke();
                            active_power_ctx.fillText(i * 20, 45, 350 - i * 20 + 5);
                        }   
                        
                        active_power_ctx.beginPath();
                        active_power_ctx.strokeStyle = "blue";
                        // active_power_ctx.lineWidth = 1;
                        // active_power_ctx.setLineDash([15, 5]); 
                        for (var i = 1; i <= 14; i++) {
                            active_power_ctx.moveTo(55, 350 - i * 20);                             
                            active_power_ctx.lineTo(550, 350 - i * 20); 
                        }
                        active_power_ctx.stroke();
                        // 绘制折线
                        active_power_ctx.beginPath();
                        active_power_ctx.moveTo(50, 350-randomArray[0]); // 从第一个数据点开始
                        active_power_ctx.strokeStyle = "red"; // 设置折线颜色
                        for (var i = 1; i < randomArray.length; i++) {
                            active_power_ctx.lineTo(50 + i, 350 - randomArray[i]); // 绘制每个数据点
                        }
                        active_power_ctx.stroke();                        
                    }
                    active_power_paint();
                    active_power_chart.addEventListener("mousemove",function(event) {
                        var mouseX = event.offsetX;
                        var mouseY = event.offsetY;
                        // 清除之前的竖线和文本
                        active_power_ctx.clearRect(0, 0, active_power_chart.width, active_power_chart.height);
                        active_power_paint();
                        if(randomArray[mouseX-50]!=undefined){
                            active_power_ctx.beginPath();
                            active_power_ctx.strokeStyle = "black";                        
                            active_power_ctx.moveTo(mouseX, 50);
                            active_power_ctx.lineTo(mouseX, 350);
                            active_power_ctx.stroke();
                            active_power_ctx.fillText(randomArray[mouseX-50], mouseX , 40);}
                    });

                </script>
                
                <P><span class="item">当日有功总电量 <span id="active_energy_in_day">00000</span>KWh</span>
                 <span class="item2">尖 <span id="energy_of_peak_in_day">00000</span>KWh</span>
                    <span class="item2">峰 <span id="energy_of_high_in_day">00000</span>KWh</span>
                    <span class="item2">平 <span id="energy_of_normal_in_day">00000</span>KWh</span>
                    <span class="item2">谷 <span id="energy_of_low_in_day">00000</span>KWh</span>
                </p> 
                <P> <span class="item">当月有功总电量 <span id="active_energy_in_month">00000</span>KWh</span>
                    <span class="item2">尖 <span id="energy_of_peak_in_month">00000</span>KWh</span>
                    <span class="item2">峰 <span id="energy_of_high_in_month">00000</span>KWh</span>
                    <span class="item2">平 <span id="energy_of_normal_in_month">00000</span>KWh</span>
                    <span class="item2">谷 <span id="energy_of_low_in_month">00000</span>KWh</span>
                </p>
                <p> <span class="item">当月无功电量<span id="reactive_energy_in_month">00000</span>KVA</span>
                    <span class="item">当月功率因数<span id="power_factor_in_month">00000</span></span> 
                </p>   
            
            </form>
        </div>
        <div class="energy_storage_cabinet">
        <form action="" id="energy_storage_cabinet">
           
        <p>当前状态（运行、停止、网络连接失败） <button>启动</button><button>停止</button></p>
        <p>工作状况（充电、放电、待机、异常停机、正常停机、未知）</p>
        <p>当前功率<span>0000</span>KW</p>
        
        <p><span class="item">A相电压<span id="voltage_of_cabinet_phase_A">00000</span>V</span>
            <span class="item">B相电压<span id="voltage_of_cabinet_phase_B">00000</span>V</span>
            <span class="item">C相电压<span id="voltage_of_cabinet_phase_C">00000</span>V</span>
        </p>
        <p><span class="item">A相电流<span id="current_of_cabinet_phase_A">00000</span>A</span>
            <span class="item">B相电流<span id="current_of_cabinet_phase_B">00000</span>A</span>
            <span class="item">C相电流<span id="current_of_cabinet_phase_C">00000</span>A</span>
        </p>
        <p>
            <span class="item">直流电压<span id="DC_voltage_of_cabinet">0000</span>V</span>
            <span class="item">直流电流<span id="DC_current_of_cabinet">0000</span>A</span>
        </p>
        <fieldset>
            <legend>储能柜电量(SOC)</legend><canvas id="soc_chart" width="600px" height="400px"></canvas>
        </fieldset>
        <p>异常记录</p>
        <table>
            <tr>日期</tr><tr>时间</tr><tr>事项</tr>
        </table>
        <p><span class="item">当日充电量<span id="charged_energy_in_day">0000</span>KWh</span>
            <span class="item2">尖<span id="charged_energy_of_peak_in_day">0000</span>KWh</span>
            <span class="item2">峰<span id="charged_energy_of_high_in_day">0000</span>KWh</span>
            <span class="item2">平<span id="charged_energy_of_normal_in_day">0000</span>KWh</span>
            <span class="item2">谷<span id="charged_energy_of_low_in_day">0000</span>KWh</span>
        </p>
        <p> <span class="item">当日放电量<span id="discharged_energy_in_day">0000</span>KWh</span>
            <span class="item2">尖<span id="discharged_energy_of_peak_in_day">0000</span>KWh</span>
            <span class="item2">峰<span id="discharged_energy_of_high_in_day">0000</span>KWh</span>
            <span class="item2">平<span id="discharged_energy_of_normail_in_day">0000</span>KWh</span>
            <span class="item2">谷<span id="discharged_energy_of_low_in_day">0000</span>KWh</span>
        </p>
        <hr>        
        <p><span class="item">当月充电量<span id="charged_energy_in_month">0000</span>KWh</span>
            <span class="item2">尖<span id="charged_energy_of_peak_in_month">0000</span>KWh</span>
            <span class="item2">峰<span id="charged_energy_of_high_in_month">0000</span>KWh</span>
            <span class="item2">平<span id="charged_energy_of_normal_in_month">0000</span>KWh</span>
            <span class="item2">谷<span id="charged_energy_of_low_in_month">0000</span>KWh</span>
        </p>
        <p> <span class="item">当月放电量<span id="discharged_energy_in_month">0000</span>KWh</span>
            <span class="item2">尖<span id="discharged_energy_of_peak_in_month">0000</span>KWh</span>
            <span class="item2">峰<span id="discharged_energy_of_high_in_month">0000</span>KWh</span>
            <span class="item2">平<span id="discharged_energy_of_normal_in_month">0000</span>KWh</span>
            <span class="item2">谷<span id="discharged_energy_of_low_in_month">0000</span>KWh</span>
        </p>
                
        <p>当月无功电量<span id="reactive_energy_in_month">0000</span>KVA</p>
        <p>当月电能转化率（有功放电电量/有功充电电量）<span id="energy_ratio">0000</span>%</p>
        
        
        </form>
        </div>
        <div class="bill_for_electricity">
            <form action="">
            
            <p>当月电价</p>
            <label for="peak_price">尖</label><input type="number" name="" id="peak_price">
            <label for="high_price">峰</label><input type="number" name="" id="high_price">
            <label for="normal_price">平</label><input type="number" name="" id="normal_price">
            <label for="low_price">谷</label><input type="number" name="" id="low_price">
            <input type="submit" name="" id="" value="修改" ><br>
            <canvas id="bill_history_in_year">电费月历史（年度柱状图）</canvas>
            <p>预计当月电费</p>
            <span class="item">总电费<span id="expected_electricity_bill">0000</span>元</span>
            <span>尖<span id="expected_monney_for_peak">0000</span>元</span>
            <span>峰<span id="expected_money_for_high">0000</span>元</span>
            <span>平<span id="expected_money_for_normal">0000</span>元</span>
            <span>谷<span id="expected_money_for_low">0000</span>元</span>
            <br>
            <p>储能柜当月累计电费明细</p>
            <span>累计充电电费<span id="charged_money_in_month">0000</span>元</span>
            <span>尖<span id="charged_money_for_peak_in_month">0000</span>元</span>
            <span>峰<span id="charged_money_for_high_in_month">0000</span>元</span>
            <span>平<span id="charged_money_for_normal_in_month">0000</span>元</span> 
            <span>谷<span id="charged_money_for_low_in_month">0000</span>元</span>
            <br>
             <span>累计放电电费<span id="discharged_money_in_month">0000</span>元</span>
            <span>尖<span id="discharged_money_for_peak_in_month">0000</span>元</span>
            <span>峰<span id="discharged_money_for_high_in_month">0000</span>元</span>
            <span>平<span id="discharged_money_for_normal_in_month">0000</span>元</span> 
            <span>谷<span id="discharged_money_for_low_in_month">0000</span>元</span>
            <br>
            
            <span>储能柜当月效益<span id="">0000</span>元</span> <br>
            <canvas id="bill_history_in_year">储能柜月效益（年度柱状图）</canvas>
            
            </form>
        </div>        
        <div class="history_data">
            
            <fieldset>
                <legend>电网输入历史数据</legend>                
                <canvas id="daily_electricity_in_month" width="400px" height="300px">电量日历史(月度柱状图)(最近12月按钮切换)</canvas>
                <canvas id="monthly_electricity_in_year" width="400px" height="300px">电量月历史（年度柱状图）(最近3年按钮切换显示)</canvas>
                
            </fieldset>
            <fieldset>
                <legend>储能柜充放电历史数据</legend>

                <div class="cabinet_electricity_history">
                    <canvas class="main_chart" width="600px" height="450px" id="cabinet_chareged_electricity_history">充电电量日历史（月度柱状图） 按键切换 充电电量月历史（年度柱状图） </canvas>
                    <canvas class="sub_chart1" width="200px" height="100px" id="cabinet_chareged_electricity_of_peak_history">尖</canvas>
                    <canvas class="sub_chart2" width="200px" height="100px" id="cabinet_chareged_electricity_of_high_history">峰</canvas>
                    <canvas class="sub_chart3" width="200px" height="100px" id="cabinet_chareged_electricity_of_normal_history">平</canvas>
                    <canvas class="sub_chart4" width="200px" height="100px" id="cabinet_chareged_electricity_of_low_history">谷</canvas>                    
                </div>
                <div><button onclick="CEH_paint(CCEH,'时间(日)','电量(kwh)',31,15,16,20,3,data,'月度数据')">月度数据</button>
                    <button onclick="CEH_paint(CCEH,'时间(月)','电量(kwh)',12,15,40,20,60,data,'年度数据')">年度数据</button>
                </div>
                <hr>
                <hr>
                <div class="cabinet_electricity_history">
                    <canvas class="main_chart" width="600px" height="450px" id="cabinet_dischareged_electricity_history">放电电量日历史（月度柱状图） 按键切换 充电电量月历史（年度柱状图）</canvas>
                    <canvas class="sub_chart1" width="200px" height="100px" id="cabinet_dischareged_electricity_of_peak_history">尖</canvas>
                    <canvas class="sub_chart2" width="200px" height="100px" id="cabinet_dischareged_electricity_of_high_history">峰</canvas>
                    <canvas class="sub_chart3" width="200px" height="100px" id="cabinet_dischareged_electricity_of_normal_history">平</canvas>
                    <canvas class="sub_chart4" width="200px" height="100px" id="cabinet_dischareged_electricity_of_low_history">谷</canvas>
                </div>
                <hr>
                <hr>
                <canvas width="500px" height="300px" id="ratio_history">储能柜月转化率历史（年度柱状图）</canvas>
            </fieldset>
        </div>
        <script>
            var CCEH = document.getElementById("cabinet_chareged_electricity_history");
            var CDEH = document.getElementById("cabinet_dischareged_electricity_history");
            
            var data = [60, 40, 80, 110, 160, 150, 70, 80, 90, 100,80,110];
            function CEH_paint(canvas_obj,x_text,y_text,x_range,y_range,x_interval,y_interval,y_ratio,data,specification){
                        var canvas_ctx = canvas_obj.getContext("2d");
                        canvas_ctx.clearRect(0, 0, canvas_obj.width, canvas_obj.height)                        
                        canvas_ctx.beginPath();
                        canvas_ctx.moveTo(50, canvas_obj.height-50); // 从左下角开始
                        canvas_ctx.lineTo(canvas_obj.width-50, canvas_obj.height-50); // 绘制x轴
                        canvas_ctx.moveTo(50, canvas_obj.height-50); // 回到原点
                        canvas_ctx.lineTo(50, 50); // 绘制y轴 
                        canvas_ctx.strokeStyle = "black";                       
                        canvas_ctx.stroke();
                        canvas_ctx.textAlign = "left";
                        canvas_ctx.font = "16px Arial";
                        canvas_ctx.fillText(x_text,canvas_obj.width-60,canvas_obj.height-10);
                        canvas_ctx.fillText(y_text,10,40);
                        canvas_ctx.fillText(specification,canvas_obj.width-100,20);                            
                        // 绘制x轴刻度
                        canvas_ctx.font = "12px Arial";
                        for (var i = 0; i <= x_range; i++) {
                            canvas_ctx.moveTo(50 + i * x_interval, canvas_obj.height-50);
                            canvas_ctx.lineTo(50 + i * x_interval, canvas_obj.height-55);
                            canvas_ctx.stroke();
                            canvas_ctx.fillText(i, 50 + i * x_interval - 5, canvas_obj.height-30);
                        }
                        
                        // 绘制y轴刻度
                        canvas_ctx.textAlign = "right";                        
                        for (var i = 0; i <= y_range; i++) {
                            canvas_ctx.moveTo(50, canvas_obj.height-50 - i * y_interval);
                            canvas_ctx.lineTo(55, canvas_obj.height-50 - i * y_interval);
                            canvas_ctx.stroke();
                            canvas_ctx.fillText(i * y_interval*y_ratio, 45, canvas_obj.height-50 - i * y_interval + 5);
                        }   
                        
                        // 绘制辅助线 
                        canvas_ctx.beginPath();
                        canvas_ctx.strokeStyle = "blue";
                        for (var i = 1; i <= y_range; i++) {
                            canvas_ctx.moveTo(55, canvas_obj.height-50 - i * y_interval);                             
                            canvas_ctx.lineTo(canvas_obj.width-50, canvas_obj.height-50 - i * y_interval); 
                        }
                        canvas_ctx.stroke();

                        // 绘制柱状图                        
                        var rect_width = x_interval/4;                        
                        canvas_ctx.fillStyle = "red"; // 设置柱状图颜色
                        for (var i = 1; i < data.length +1; i++) {
                            canvas_ctx.fillRect(50+ i * x_interval - rect_width , canvas_obj.height-50-data[i-1]/y_ratio,2*rect_width,data[i-1]/y_ratio); // 绘制每个数据点
                        }
                        canvas_ctx.fillStyle = "black";                      
                    }
                    CEH_paint(CCEH,"时间(日)","电量(kwh)",31,15,16,20,3,data,'月度数据');
                    CEH_paint(CDEH,"时间(日)","电量(kwh)",31,15,16,20,3,data,'月度数据');
                    
        </script>
    </div>
    
    <div class="tail"><hr><h6>created by hwq</h6></div>
</div>           
    
</body>
</html>
